<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页内容抓取助手</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border: none;
            border-radius: 10px;
        }
        .result-section {
            margin-top: 30px;
        }
        .loading {
            display: none;
        }
        .extracted-content {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }
        .image-preview {
            max-width: 100px;
            max-height: 100px;
            margin: 5px;
            border-radius: 5px;
        }
        .json-output {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <h1 class="text-center mb-4">
            <i class="fas fa-spider text-primary"></i>
            网页内容抓取助手
        </h1>
        
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-link"></i>
                    输入网页URL
                </h5>
            </div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <input type="url" class="form-control" id="urlInput" 
                           placeholder="请输入要抓取的网页URL，例如：https://example.com" 
                           value="https://example.com">
                    <button class="btn btn-primary" type="button" onclick="fetchWebContent()">
                        <i class="fas fa-download"></i>
                        抓取内容
                    </button>
                </div>
                <small class="text-muted">
                    <i class="fas fa-info-circle"></i>
                    注意：由于浏览器安全限制，某些网站可能无法抓取
                </small>
            </div>
        </div>

        <div class="loading text-center mt-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">正在抓取网页内容...</p>
        </div>

        <div class="result-section" id="resultSection" style="display: none;">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-check-circle"></i>
                        抓取结果
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fas fa-heading"></i> 网页标题</h6>
                            <p id="pageTitle" class="text-muted">-</p>
                            
                            <h6><i class="fas fa-paragraph"></i> 主要内容</h6>
                            <div id="mainContent" class="extracted-content">-</div>
                            
                            <h6><i class="fas fa-image"></i> 图片链接</h6>
                            <div id="imageLinks" class="extracted-content">-</div>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fas fa-code"></i> JSON格式数据</h6>
                            <div class="json-output" id="jsonOutput">{}</div>
                            <button class="btn btn-success mt-3" onclick="downloadJSON()">
                                <i class="fas fa-download"></i>
                                下载JSON文件
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        async function fetchWebContent() {
            const url = document.getElementById('urlInput').value.trim();
            if (!url) {
                alert('请输入有效的URL！');
                return;
            }

            // 显示加载状态
            document.querySelector('.loading').style.display = 'block';
            document.getElementById('resultSection').style.display = 'none';

            try {
                // 使用CORS代理服务
                const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`;
                const response = await fetch(proxyUrl);
                
                if (!response.ok) {
                    throw new Error('无法获取网页内容，可能是CORS限制');
                }

                const data = await response.json();
                const htmlContent = data.contents;

                // 解析HTML内容
                const parser = new DOMParser();
                const doc = parser.parseFromString(htmlContent, 'text/html');

                // 提取标题
                const title = doc.querySelector('title')?.textContent || '无标题';
                
                // 提取主要内容（优先选择主要内容区域）
                let content = '';
                const contentSelectors = [
                    'main',
                    'article',
                    '[role="main"]',
                    '.content',
                    '.main-content',
                    '#content',
                    '#main-content',
                    '.post-content',
                    '.entry-content'
                ];

                for (const selector of contentSelectors) {
                    const element = doc.querySelector(selector);
                    if (element) {
                        content = element.textContent.trim().substring(0, 1000) + '...';
                        break;
                    }
                }

                if (!content) {
                    // 如果没有找到主要内容区域，提取body的文本
                    content = doc.body?.textContent?.trim().substring(0, 1000) + '...' || '无内容';
                }

                // 提取图片链接
                const images = Array.from(doc.querySelectorAll('img'))
                    .map(img => ({
                        src: img.src,
                        alt: img.alt || '无描述',
                        width: img.width || '未知',
                        height: img.height || '未知'
                    }))
                    .filter(img => img.src && img.src.startsWith('http'))
                    .slice(0, 10); // 限制最多10张图片

                // 更新UI
                document.getElementById('pageTitle').textContent = title;
                document.getElementById('mainContent').textContent = content;
                
                const imageLinksDiv = document.getElementById('imageLinks');
                if (images.length > 0) {
                    imageLinksDiv.innerHTML = images.map(img => 
                        `<div class="mb-2">
                            <img src="${img.src}" alt="${img.alt}" class="image-preview">
                            <small class="text-muted d-block">${img.alt}</small>
                            <small class="text-muted">${img.width}x${img.height}</small>
                        </div>`
                    ).join('');
                } else {
                    imageLinksDiv.textContent = '未找到图片';
                }

                // 生成JSON数据
                const jsonData = {
                    url: url,
                    timestamp: new Date().toISOString(),
                    title: title,
                    content: content,
                    images: images,
                    totalImages: images.length
                };

                document.getElementById('jsonOutput').textContent = JSON.stringify(jsonData, null, 2);
                
                // 显示结果
                document.getElementById('resultSection').style.display = 'block';

            } catch (error) {
                alert('抓取失败：' + error.message);
                console.error('Error:', error);
            } finally {
                document.querySelector('.loading').style.display = 'none';
            }
        }

        function downloadJSON() {
            const jsonData = document.getElementById('jsonOutput').textContent;
            const blob = new Blob([jsonData], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `web-content-${Date.now()}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 回车键触发抓取
        document.getElementById('urlInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                fetchWebContent();
            }
        });
    </script>
</body>
</html>
